<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

    <title>04-bootstrap作业</title>

</head>

<style>

    .form-inline{border: 3px solid black;}

    .tou{width: 97%;height: 80px;border: 1px solid white;background-color: rgb(66, 52, 199);margin: 10px 20px;}

    .form-group{width: 97%;margin: 20px 10px;}

    .form-control{width: 100%;}

</style>



<body>

    <br>

    <form class="form-inline">

        <div class="tou">

            <div class="form-group">

                <input type="search" class="form-control" id="exampleInputSearch" placeholder="Search Our Website & Product">

                <button class="btn btn-default"><a href=""><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></button>

            </div>

        </div>

        <div class="form-group">

            <br>

            <div id="neirong">

                <br>

                <div class="row1">

                    <div class="col-sm-6 col-md-4">

                        <div class="thumbnail">

                            <div class="caption" style="background-color: rgb(181, 241, 221);">

                                <h3>Thumbnail label</h3>

                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
                                    porta

                                    gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                                <p><a href="#" class="btn btn-primary" role="button">Button</a> </p>

                            </div>

                        </div>

                    </div>

                </div>



                <div class="row">

                    <div class="col-sm-6 col-md-4">

                        <div class="thumbnail">

                            <div class="caption" style="background-color: rgb(181, 241, 221);">

                                <h3>Thumbnail label</h3>

                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.

                                    Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies

                                    vehicula

                                    ut id elit.</p>

                                <p><a href="#" class="btn btn-primary" role="button">Button</a> </p>

                            </div>

                        </div>

                    </div>



                    <div class="row">

                        <div class="col-sm-6 col-md-4">

                            <div class="thumbnail">

                                <div class="caption" style="background-color: rgb(181, 241, 221);">

                                    <h3>Thumbnail label</h3>

                                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.

                                        Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh
                                        ultricies

                                        vehicula

                                        ut id elit.</p>

                                    <p><a href="#" class="btn btn-primary" role="button">Button</a> </p>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

    </form>



</body>



</html>